<template>
  <el-dialog
    v-model="userStore.showLogin"
    class="custom-dialog"
    width="722px"
    :before-close="handleClose"
  >
    <div class="wrap">
      <div class="welcome mb-6">欢迎使用桉树人工林垂类大模型</div>
      <div class="login-type-box">
        <el-form
          class="login-form"
          :model="form"
          label-width="auto"
          size="large"
        >
          <el-form-item label="">
            <el-input v-model="form.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="form.password" type="password" placeholder="密码" />
          </el-form-item>
          <div class="forgot-register">
            <span class="color2B6E50" @click="switchComponent('Forgot')"> 忘记密码 </span>
            <span class="color2B6E50" @click="switchComponent('Register')"> 注册账号 </span>
          </div>
          <el-form-item label="">
            <el-checkbox v-model="form.hasAgreedToTerms" size="large"> 我已阅读并同意 </el-checkbox>
            <span @click="switchComponent('Protocol')" style="cursor: pointer" class="color2B6E50">
              《产品用户协议》
            </span>
            和
            <span @click="switchComponent('Privacy')" style="cursor: pointer" class="color2B6E50">
              《隐私政策》
            </span>
          </el-form-item>
          <el-form-item>
            <el-button color="#2B6E50" class="submit-button" type="primary" @click="onSubmit">
              立即登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore();

const form = reactive({
  username: '',
  password: '',
  hasAgreedToTerms: false,
})

const onSubmit = async () => {
  if (!form.hasAgreedToTerms) {
    // console.log('请先同意协议')
    ElMessage({
      message: '请先同意协议',
      type: 'error',
    })
    return
  }
  userStore.handleLogin(form);
}

const switchComponent = (componentName: string) => {
  console.log("切换组件");
  // emit('switchComponent', componentName)
}
const handleClose = () => {
  userStore.cancelLogin()
}
</script>

<style lang="scss" scoped>
.custom-dialog {
  padding: 0;
  .wrap {
    background: url('@/assets/images/login-bg.png') no-repeat;
    background-size: 100% 100%;
    width: 722px;
    height: 520px;
    border-radius: 4px;
    .welcome {
      font-family: PingFangSC-Semibold;
      font-size: 28px;
      color: #2b6e50;
      letter-spacing: 0;
      text-align: center;
      font-weight: 600;
      padding-top: 87px;
    }
    .login-type-box {
      padding: 0 174px 0 171px;

      .login-form {
        width: 100%;
        .submit-button {
          width: 100%;
        }
        .color2B6E50 {
          color: #2b6e50;
        }
        .send-code {
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #999999;
          letter-spacing: 0;
          font-weight: 500;
          cursor: pointer;
          &:hover {
            color: #2b6e50;
          }
        }
        .forgot-register {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          span {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
